<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/common_css :: commonHeader('添加用户')">
</head>
<link rel="stylesheet" th:href="@{/js/admin.ui/lib/zTree/v3/css/metroStyle/metroStyle.css}" type="text/css">
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-user-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>用户账号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="用户账号（必填，通常为手机号码，登录系统使用）" id="account" name="account" maxlength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>登录密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="checkbox" id="passwordCheckBox" name="useDefaultPswd" checked="checked" value="1" onclick="javascript:togglePswd();" />
                <label for="passwordCheckBox">使用系统初始化默认密码（初始化默认密码为：123456，用户添加后请通知用户及时修改为新密码）</label>
            </div>
        </div>
        <div class="row cl" id="passwordDiv" style="display: none;">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>登录密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" placeholder="登录密码（必填，登录系统使用）" id="password" name="password" maxlength="50" />
            </div>
        </div>
        <div class="row cl" id="rpasswordDiv" style="display: none;">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" placeholder="确认密码（必填，确保您密码输入正确）" id="rpassword" name="rpassword" maxlength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">真实姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="真实姓名（建议填写便于管理）" name="realName" id="realName" maxlength="50" />
            </div>
        </div>
        <!--<div class="row cl">-->
            <!--<label class="form-label col-xs-4 col-sm-2">用户昵称：</label>-->
            <!--<div class="formControls col-xs-8 col-sm-9">-->
                <!--<input type="text" class="input-text" placeholder="用户昵称" name="nickName" id="nickName" maxlength="50" />-->
            <!--</div>-->
        <!--</div>-->
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">用户性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box" style="padding-left:0px;">
                    <input type="radio" name="userSex" id="sex-1" value="1" checked="checked" />
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box" style="padding-left:0px;">
                    <input type="radio" name="userSex" id="sex-2" value="2" />
                    <label for="sex-2">女</label>
                </div>
            </div>
        </div>
        <!--<div class="row cl">-->
            <!--<label class="form-label col-xs-4 col-sm-2">用户生日：</label>-->
            <!--<div class="formControls col-xs-8 col-sm-9">-->
                <!--<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})" id="birthday" name="birthday" class="input-text Wdate" placeholder="用户生日" />-->
            <!--</div>-->
        <!--</div>-->
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">用户手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="用户手机" name="telphone" id="telphone" maxlength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">电子邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="电子邮箱" name="email" id="email" maxlength="255" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">用户说明：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="userDesc" maxlength="200" class="textarea"  placeholder="用户说明...200个字符以内" onKeyUp="javascript:textareaLength(this);"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length"><span id="textareaLengthSpan">0</span></em>/200</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>用户角色：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 角色树-->
                <ul id="roleTree" class="ztree" ></ul>
                <input type="hidden" name="roleIds" id='roleIds'/>
            </div>
        </div>
        <div class="row cl">
            <div style="text-align: center;">
                <button class="btn btn-primary radius" type="submit">
                    <i class="Hui-iconfont">&#xe632;</i> 保存
                </button>
                &nbsp;&nbsp;
                <button onClick="layer_close();" class="btn btn-default radius" type="button">
                    &nbsp;&nbsp;取消&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>
</article>
<div th:include="admin/common/common_js :: onLoadJS"></div>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // 角色树配置
    var treeSetting = {
        view: {selectedMulti: false},
        check: {enable: true},
        data: {simpleData: {enable: true}}
    };
    $(function(){
        $("#form-user-add").validate({
            rules:{
                account:{required:true, minlength:2, maxlength:50,remote: {
                    url: '/pestdiagnosis/sys/user/validateIsUserExist',
                    type: 'post',
                    dataType: 'json',
                    data: {validateType:'account' ,account: function () {return $.trim($("#account").val());}},
                    dataFilter: function (data) {
                        if(data != null && data != '') {
                            if (eval('(' + data + ')').data == '0') {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }},
                password:{required:false},
                rpassword:{required:false, equalTo: "#password"},
                realName:{required:false, minlength:2, maxlength:50},
                nickName:{required:false, minlength:2, maxlength:50},
                email:{required:false, email:true, minlength:5, maxlength:255,remote: {
                    url: '/pestdiagnosis/sys/user/validateIsUserExist',
                    type: 'post',
                    dataType: 'json',
                    data: {validateType:'email' ,email: function () {return $.trim($("#email").val());}},
                    dataFilter: function (data) {
                        if(data != null && data != '') {
                            if (eval('(' + data + ')').data == '0') {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }}
            },
            messages:{
                account:{remote:'账号已经存在'},
                email:{remote:'邮箱已经存在'}
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                var treeObj = $.fn.zTree.getZTreeObj("roleTree");
                var nodes = treeObj.getCheckedNodes(true);
                if(nodes.length  == 0) {
                    layer.msg('请选择用户所属角色', {icon: 2});
                } else {
                    var roleIds = "";
                    for (var i = 0; i < nodes.length; i++) {
                        roleIds += nodes[i].id + ",";
                    }
                    $('#roleIds').val(roleIds);
                    send(
                        '/pestdiagnosis/sys/user/add',
                        $('#form-user-add').serialize(),
                        function (data) {
                            if(data.result == 0) {
                                layer.msg(data.message, {icon: 1,time: 1500}, function() {
                                    window.parent.location.href = "/pestdiagnosis/sys/user/list";
                                });
                            } else {
                                layer.msg(data.message, {icon: 5,time: 1500});
                                $('#account').focus();
                            }
                        },
                        function (res) {

                        }
                    );
                }
            }
        });
        var treeData = [[${treeData}]];
        if(treeData != null && $.trim(treeData) != '') {
            var zNodes = eval('(' + treeData + ')');
            $.fn.zTree.init($("#roleTree"), treeSetting, zNodes);
        }
    });
    // 计算文本域字符长度
    function textareaLength(obj) {
        $('#textareaLengthSpan').text($(obj).val().length);
    }
    // 显示或隐藏密码输入区域
    function togglePswd() {
        var isShow = $('#passwordCheckBox').prop('checked');
        if(isShow) {
            $('#passwordDiv').hide();
            $('#rpasswordDiv').hide();
            $("#password").rules("remove");
            $("#rpassword").rules("remove");
        } else {
            $('#passwordDiv').show();
            $('#rpasswordDiv').show();
            $("#password").rules("add",{required:true,minlength:3, maxlength:50});
            $("#rpassword").rules("add",{required:true,minlength:3, maxlength:50, equalTo:"#password"});
        }
    }
</script>
</body>
</html>